<template>
  <el-select v-model="localValue" @change="handleChange"
             filterable value-key="id" clearable>
    <el-option v-for="(item,index) in options"
               :key="item.id"
               :label="item.name"
               :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
export default {
    props: {
        api: {
            type: Object,
            default: {}
        },
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            localValue: [],
            properties: {
                value: 'id',
                label: 'name'
            },
            options: []
        };
    },
    computed: {
    },
    watch: {
        value() {
            this.localValue = this.value;
        }
    },
    created() {
        this.getDate();
    },
    methods: {
        getDate() {
            this.api.fetchAll()
                .then(data => {
                    this.options = data.obj;
                })
                .catch(() => {
                    this.$alert('获取类别数据失败');
                });
        },
        handleChange(item) {
            this.$emit('input', item);
            this.$emit('change', item);
        }
    }
};
</script>

<style scoped>

</style>
